<template>
  <div id="app">
    <router-view v-if="!$route.meta.keepAlive" />
    <keep-alive :include="include">
      <!-- 会被缓存的组件 -->
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 使用就会这样使用 -->
    <!-- <index /> -->
    <!-- 或者是<index></index> -->
  </div>
</template>
<script>
import { Token } from "./assets/js/api/apply";
export default {
  name: "app",
  data: () => ({
    include: []
  }),
  created() {
    Token().then(res => {
      // console.log(res);
      if (res.code == 512) {
        localStorage.removeItem("token");
        sessionStorage.removeItem("token");
        localStorage.removeItem("img");
        localStorage.removeItem("userName");
      }
    });
  },
  watch: {
    $route(to, from) {
      // 是否需要缓存
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
        var index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
    }
  },
  components: {}
};
</script>
<style>
#app {
  font-size: 16px;
  /* background: transparent; */

  /* font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; */
  font-family: "微软雅黑";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app-space {
  padding-top: 0;
}
</style>
